<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>通用关键字</title>
    <style type="text/css">
      :root {
        --box-width: 300px !important;
        --box-height: 300px !important;
      }
      /* 书写区 */
      .demo1 {
        color: fuchsia;
      }
      .demo1 div {
        color: green;
      }
      .demo1 input:checked + div {
        color: inherit;
      }
      .demo1 input:checked + div::after {
        content: '已经设置了inhibit';
        display: block;
        margin-top: 10px;
        opacity: 0.6;
      }

      .demo2 {
        color: fuchsia;
      }
      .demo2 div {
        color: blue;
        font-weight: 900;
      }
      .demo2 input:checked + div {
        color: initial;
      }
      .demo2 input:checked + div::after {
        content: '已经设置了initial';
        display: block;
        margin-top: 10px;
        opacity: 0.6;
      }

      .demo3 {
        color: fuchsia;
      }
      .demo3 div {
        color: green;
      }
      .demo3 input:checked + div {
        color: unset;
      }
      .demo3 input:checked + div::after {
        content: '已经设置了unset（具继承性）';
        display: block;
        margin-top: 10px;
        opacity: 0.6;
      }

      .demo4 {
        display: block;
        /* 装饰 */
        margin-top: 20px;
        background-color: fuchsia;
        color: #fff;
      }
      .demo4 div {
        display: inline;
        /* 装饰 */
        color: #fff;
        background-color: green;
      }
      .demo4 input:checked + div {
        display: unset;
      }
      .demo4 input:checked + div::after {
        content: '已经设置了unset（不具继承性，display:block）';
        display: block;
        margin-top: 10px;
        opacity: 0.6;
      }

      .demo5 ul {
        list-style: none;
      }
      .demo5 input:checked + ul {
        all: revert;
      }
      .demo5 input:checked + ul::after {
        content: '已经设置了revert';
        display: block;
        margin-top: 10px;
        opacity: 0.6;
      }
    </style>
    <link rel="stylesheet" href="./0-模板.css" />
  </head>
  <body>
    <a href="">上一篇</a>
    <a href="./2-supports规则.html">下一篇</a>
    <br />
    <div class="demo-box">
      <dl>
        <dt>inherit——该属性继承自父亲</dt>
        <dd>
          <div class="demo1">
            爹
            <input type="checkbox" />
            设置inherit
            <div>儿儿儿儿儿儿儿儿儿儿</div>
          </div>
        </dd>
      </dl>
      <dl>
        <dt>initial——还原为CSS规定的默认值</dt>
        <dd>
          <div class="demo2">
            爹
            <input type="checkbox" />
            设置inherit
            <div>儿</div>
          </div>
        </dd>
      </dl>
      <dl>
        <dt>
          unset——若有继承性，则继承父亲，等同于inhibit；否则还原为CSS规定的默认值，等同于initial
        </dt>
        <dd>
          <div>
            <div class="demo3">
              爹
              <input type="checkbox" />
              设置unset
              <div>儿儿儿儿儿儿儿儿儿儿</div>
            </div>
            <div class="demo4">
              爹
              <input type="checkbox" />
              设置unset
              <div>儿儿儿儿儿儿儿儿儿儿</div>
            </div>
          </div>
        </dd>
      </dl>
      <dl>
        <dt>revert——还原为浏览器的默认值</dt>
        <dd>
          <div class="demo5">
            爹
            <input type="checkbox" />
            设置revert
            <ul>
              <li>儿儿儿儿儿儿儿儿儿儿</li>
            </ul>
          </div>
        </dd>
      </dl>
    </div>
  </body>
</html>
